<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表首页</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
    <input type="text" id="likeName"><input type="text" id="likePassword"><button id="mysearch">模糊查询</button><br/>
    <button id="insertUser">新增用户</button>
    <button id="deleteBatch" onclick="delBatch()">批量删除</button>
    <button id="chooseAll">全选</button>
    <button id="chooseBack">反选</button>
    <table border="1">
        <caption>用户信息列表</caption>
        <tr id="myTr">
            <td>勾选</td>
            <td>主键</td>
            <td>用户名</td>
            <td>密码</td>
            <td>年龄</td>
            <td>更新</td>
            <td>删除</td>
        </tr>
    </table>
    <div>总计<span id="count"></span>条</div>
    <div>每页显示<span id="showCount"></span>条</div>
    <div>总计<span id="allPage"></span>页</div>
    <div>当前<span id="page"></span>页</div>
    <div id="pageList"></div>

</body>
<script>
    function del(id) {
        let action = confirm("你确定要删除这条记录吗？");   // 当给到用户提示信息时，应该把这一行记录背景色变成深色

        if(action) {
            $.ajax({                    // 标准化模板，不用死记
                url:"/deleteByIdServlet",   // 请求路径
                type:"post",            // 请求的方式，不区分大小写
                async:true,             // 是否异步，true是默认值，false为同步请求
                cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                datatype:"json",        // 返回类型，text文本、html页面、json数据
                data:{                  // 传递给后台参数名和参数值
                    id:id
                },
                success:function(response){        // 如果后端响应成功，则会返回所有数据给到response对象中
                    console.log(response);
                    alert(response.msg);
                    if(response.code === 200) {
                        window.location.href = "index.html";   // 在这里的作用，起到了刷新的功能
                    }
                },
                error:function(response){          // 如果请求失败，则会执行error函数
                    alert("出错" + response);
                }
            });
        }
    }

    function delBatch()
    {
        var checkedNum = $("input[name='myId']:checked").length;
        if(checkedNum == 0)
        {
            alert("至少选择一项!");
            return false;
        }
        if(confirm("确定删除所选项目？"))
        {
            var checkedList = new Array();
            $("input[name='myId']:checked").each(function (){
                checkedList.push($(this).val());
            });
            $.ajax({
                url:"/deleteBatchServlet",
                type:"POST",
                async:true,             // 是否异步，true是默认值，false为同步请求
                cache:false,
                datatype:"json",
                data:{"delitems":checkedList.toString()},
                success:function(response){
                    console.log(response);
                    // $("[name='myId']:checkbox").attr("checked",false);
                    location.reload();//页面刷新
                },
                error:function(response){
                    alert("出错" + response);
                }
            });
        }
    }

    function selectPage(page) {
        $.ajax({                    // 标准化模板，不用死记
            url:"/page",   // 请求路径
            type:"get",            // 请求的方式，不区分大小写
            async:true,             // 是否异步，true是默认值，false为同步请求
            cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
            datatype:"json",        // 返回类型，text文本、html页面、json数据
            data:{                  // 传递给后台参数名和参数值
                page:page,
                showCount:5
            },
            success:function(response){        // 如果后端响应成功，则会返回所有数据给到response对象中
                console.log(response);
                if(response.code === 200) {
                    $("table").empty();
                    $("table").append("<caption>用户信息列表</caption>\n" +
                        "        <tr id=\"myTr\">\n" +
                        "            <td>勾选</td>\n" +
                        "            <td>主键</td>\n" +
                        "            <td>用户名</td>\n" +
                        "            <td>密码</td>\n" +
                        "            <td>年龄</td>\n" +
                        "            <td>更新</td>\n" +
                        "            <td>删除</td>\n" +
                        "        </tr>");
                    let jsonArray = response.list;
                    console.log(jsonArray);
                    if(jsonArray.length === 0) {
                        $("table").append("<tr>" +
                            "            <td colspan='4'>暂无数据内容</td>" +
                            "        </tr>");
                    }
                    else {
                        $("#count").text(response.count);                 // 总计数据库中有多少条记录
                        $("#showCount").text(response.showCount);         // 当前页面总计显示多少条
                        $("#allPage").text(response.allPage);             // 总计有多少页
                        $("#page").text(response.page);                   // 当前显示的是第几页
                        $("#pageList").empty();
                        for(i = 0; i < response.allPage; i++) {
                            $("#pageList").append("<button onclick='selectPage("+(i + 1)+")'>第" + (i + 1) + "页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                        }
                    }
                    for(i = 0; i < jsonArray.length; i++) {
                        let innerJSONObject = jsonArray[i];
                        $("table").append("<tr>" +
                            "            <td><input type='checkbox' name='myId' value='"+ innerJSONObject.id +"'></td>" +
                            "            <td>" + innerJSONObject.id + "</td>" +
                            "            <td>" + innerJSONObject.username + "</td>" +
                            "            <td>" + innerJSONObject.password + "</td>" +
                            "            <td>" + innerJSONObject.age + "</td>" +
                            "            <td><a href='userEdit.html?id=" + innerJSONObject.id + "'>更新</a></td>" +
                            "            <td><button onclick='del(" + innerJSONObject.id + ")'>删除</button></td>" +
                            "        </tr>");
                    }
                }
                else {
                    alert(response.msg);
                }
            },
            error:function(response){          // 如果请求失败，则会执行error函数
                alert("出错" + response);
            }
        });
    }
    function dimPasswordSearch(password,page) {
        $.ajax({                    // 标准化模板，不用死记
            url:"/selectUserByPasswordServlet",   // 请求路径
            type:"get",            // 请求的方式，不区分大小写
            async:true,             // 是否异步，true是默认值，false为同步请求
            cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
            datatype:"json",        // 返回类型，text文本、html页面、json数据
            data:{                  // 传递给后台参数名和参数值
                password:password,
                page:page,
                showCount:1
            },
            success:function(response) {        // 如果后端响应成功，则会返回所有数据给到response对象中
                if(response.code === 200) {
                    $("table").empty();
                    $("table").append("<caption>用户信息列表</caption>\n" +
                        "        <tr id=\"myTr\">\n" +
                        "            <td>勾选</td>\n" +
                        "            <td>主键</td>\n" +
                        "            <td>用户名</td>\n" +
                        "            <td>密码</td>\n" +
                        "            <td>年龄</td>\n" +
                        "            <td>更新</td>\n" +
                        "            <td>删除</td>\n" +
                        "        </tr>");
                    let jsonArray = response.list;
                    console.log(jsonArray);
                    if(jsonArray.length === 0) {
                        $("table").append("<tr>" +
                            "            <td colspan='4'>暂无数据内容</td>" +
                            "        </tr>");
                    }
                    else {
                        $("#count").text(response.count);                 // 总计数据库中有多少条记录
                        $("#showCount").text(response.showCount);         // 当前页面总计显示多少条
                        $("#allPage").text(response.allPage);             // 总计有多少页
                        $("#page").text(response.page);                   // 当前显示的是第几页
                        $("#pageList").empty();
                        for(i = 0; i < response.allPage; i++) {
                            $("#pageList").append("<button onclick='dimPasswordSearch($(\"#likePassword\").val(),"+(i + 1)+")'>第" + (i + 1) + "页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                        }
                    }
                    for(i = 0; i < jsonArray.length; i++) {
                        let innerJSONObject = jsonArray[i];
                        $("table").append("<tr>" +
                            "            <td><input type='checkbox' name='myId' value='"+ innerJSONObject.id +"'></td>" +
                            "            <td>" + innerJSONObject.id + "</td>" +
                            "            <td>" + innerJSONObject.username + "</td>" +
                            "            <td>" + innerJSONObject.password + "</td>" +
                            "            <td>" + innerJSONObject.age + "</td>" +
                            "            <td><a href='userEdit.html?id=" + innerJSONObject.id + "'>更新</a></td>" +
                            "            <td><button onclick='del(" + innerJSONObject.id + ")'>删除</button></td>" +
                            "        </tr>");
                    }
                }
            },
            error:function(response){          // 如果请求失败，则会执行error函数
                console.log(response);
            }
        });
    }

    function dimNameSearch(username,page) {
        $.ajax({                    // 标准化模板，不用死记
            url:"/selectUserByUserNameServlet",   // 请求路径
            type:"get",            // 请求的方式，不区分大小写
            async:true,             // 是否异步，true是默认值，false为同步请求
            cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
            datatype:"json",        // 返回类型，text文本、html页面、json数据
            data:{                  // 传递给后台参数名和参数值
                username:username,
                page:page,
                showCount:1
            },
            success:function(response) {        // 如果后端响应成功，则会返回所有数据给到response对象中
                if(response.code === 200) {
                    $("table").empty();
                    $("table").append("<caption>用户信息列表</caption>\n" +
                        "        <tr id=\"myTr\">\n" +
                        "            <td>勾选</td>\n" +
                        "            <td>主键</td>\n" +
                        "            <td>用户名</td>\n" +
                        "            <td>密码</td>\n" +
                        "            <td>年龄</td>\n" +
                        "            <td>更新</td>\n" +
                        "            <td>删除</td>\n" +
                        "        </tr>");
                    let jsonArray = response.list;
                    console.log(jsonArray);
                    if(jsonArray.length === 0) {
                        $("table").append("<tr>" +
                            "            <td colspan='4'>暂无数据内容</td>" +
                            "        </tr>");
                    }
                    else {
                        $("#count").text(response.count);                 // 总计数据库中有多少条记录
                        $("#showCount").text(response.showCount);         // 当前页面总计显示多少条
                        $("#allPage").text(response.allPage);             // 总计有多少页
                        $("#page").text(response.page);                   // 当前显示的是第几页
                        $("#pageList").empty();
                        for(i = 0; i < response.allPage; i++) {
                            $("#pageList").append("<button onclick='dimNameSearch($(\"#likeName\").val(),"+(i + 1)+")'>第" + (i + 1) + "页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                        }
                    }
                    for(i = 0; i < jsonArray.length; i++) {
                        let innerJSONObject = jsonArray[i];
                        $("table").append("<tr>" +
                            "            <td><input type='checkbox' name='myId' value='"+ innerJSONObject.id +"'></td>" +
                            "            <td>" + innerJSONObject.id + "</td>" +
                            "            <td>" + innerJSONObject.username + "</td>" +
                            "            <td>" + innerJSONObject.password + "</td>" +
                            "            <td>" + innerJSONObject.age + "</td>" +
                            "            <td><a href='userEdit.html?id=" + innerJSONObject.id + "'>更新</a></td>" +
                            "            <td><button onclick='del(" + innerJSONObject.id + ")'>删除</button></td>" +
                            "        </tr>");
                    }
                }
            },
            error:function(response){          // 如果请求失败，则会执行error函数
                console.log(response);
            }
        });
    }
    function dimSearch(username,password,page) {
        $.ajax({                    // 标准化模板，不用死记
            url:"/selectUserByNameOrPasswordServlet",   // 请求路径
            type:"get",            // 请求的方式，不区分大小写
            async:true,             // 是否异步，true是默认值，false为同步请求
            cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
            datatype:"json",        // 返回类型，text文本、html页面、json数据
            data:{                  // 传递给后台参数名和参数值
                username:username,
                password:password,
                page:page,
                showCount:5
            },
            success:function(response) {        // 如果后端响应成功，则会返回所有数据给到response对象中
                if(response.code === 200) {
                    $("table").empty();
                    $("table").append("<caption>用户信息列表</caption>\n" +
                        "        <tr id=\"myTr\">\n" +
                        "            <td>勾选</td>\n" +
                        "            <td>主键</td>\n" +
                        "            <td>用户名</td>\n" +
                        "            <td>密码</td>\n" +
                        "            <td>年龄</td>\n" +
                        "            <td>更新</td>\n" +
                        "            <td>删除</td>\n" +
                        "        </tr>");
                    let jsonArray = response.list;
                    console.log(jsonArray);
                    if(jsonArray.length === 0) {
                        $("table").append("<tr>" +
                            "            <td colspan='4'>暂无数据内容</td>" +
                            "        </tr>");
                    }
                    else {
                        $("#count").text(response.count);                 // 总计数据库中有多少条记录
                        $("#showCount").text(response.showCount);         // 当前页面总计显示多少条
                        $("#allPage").text(response.allPage);             // 总计有多少页
                        $("#page").text(response.page);                   // 当前显示的是第几页
                        $("#pageList").empty();
                        for(i = 0; i < response.allPage; i++) {
                            $("#pageList").append("<button onclick='dimSearch($(\"#likeName\").val(),$(\"#likePassword\").val(),"+(i + 1)+")'>第" + (i + 1) + "页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                        }
                    }
                    for(i = 0; i < jsonArray.length; i++) {
                        let innerJSONObject = jsonArray[i];
                        $("table").append("<tr>" +
                            "            <td><input type='checkbox' name='myId' value='"+ innerJSONObject.id +"'></td>" +
                            "            <td>" + innerJSONObject.id + "</td>" +
                            "            <td>" + innerJSONObject.username + "</td>" +
                            "            <td>" + innerJSONObject.password + "</td>" +
                            "            <td>" + innerJSONObject.age + "</td>" +
                            "            <td><a href='userEdit.html?id=" + innerJSONObject.id + "'>更新</a></td>" +
                            "            <td><button onclick='del(" + innerJSONObject.id + ")'>删除</button></td>" +
                            "        </tr>");
                    }
                }
            },
            error:function(response){          // 如果请求失败，则会执行error函数
                console.log(response);
            }
        });
    }

    $(function () {
        selectPage(1);      // 这里调用查询分页方法，此方法传递1，代表默认用户进入首页时，查询第一页的数据
        $("#chooseAll").click(function (){
            let elements = document.getElementsByName("myId");
            for (i = 0 ;i<elements.length;i++)
            {
                elements[i].checked = true;
            }
        });
        $("#chooseBack").click(function (){
           let elements = document.getElementsByName("myId");
           for(i = 0 ;i<elements.length;i++)
           {
               if(elements[i].checked)
               {
                   elements[i].checked = false;
               }
               else
               {
                   elements[i].checked = true;
               }
           }
        });
        $("#insertUser").click(function () {
            window.location.href = "userCreate.html";
        });
        $("#mysearch").click(function () {
            if($("#likePassword").val() !== "" && $("#likeName").val()!== "")
            {
                dimSearch($("#likeName").val(),$("#likePassword").val(),1);
            }
            else if($("#likeName").val() == "" && $("#likePassword").val()!== "")
            {
                dimPasswordSearch($("#likePassword").val(),1);
            }
            else if($("#likeName").val() !== "" && $("#likePassword").val() == "")
            {
                dimNameSearch($("#likeName").val(),1);
            }
            else
            {
                alert("请至少输入一项信息!");
            }
            // dimSearch($("#likeName").val(),$("#likePassword").val(),1);
        })
    });

</script>
</html>